<template lang="pug">
.view.cp-manage-materiel.fix-flex-pos
  //- 查询
  el-form.ml-search(:inline="true")
    el-form-item
      el-input(
        v-model="materielName",
        placeholder="名称拼音首字母/编号/代码",
        style="width: 200px")
    el-form-item(label="物料类别 : ")
      el-select(v-model="skuCategory", placeholder="请选择", style="width: 120px")
        el-option(label="全部", :value="null")
        el-option(
          v-for="(item, index) in cateGorySelectAll",
          :key="index", :label="item.name",
          :value="item.value")
    el-form-item(label="物料分级 : ")
      el-select(v-model="skuGrade", placeholder="请选择", style="width: 120px")
        el-option(label="全部", :value="null")
        el-option(
          v-for="(item, index) in gradeSelectAll",
          :key="index", :label="item.name",
          :value="item.value")
    el-form-item(label="物料属性 : ")
      el-select(v-model="skuProperty", placeholder="请选择", style="width: 120px")
        el-option(label="全部", :value="null")
        el-option(
          v-for="(item, index) in propertySelectAll",
          :key="index", :label="item.name",
          :value="item.value")
    el-form-item(label="状态 : ")
      el-select(v-model="skuStatus", placeholder="请选择", style="width: 120px")
        el-option(label="全部", :value="null")
        el-option(
          v-for="(item, index) in statusSelectAll",
          :key="index", :label="item.name",
          :value="item.value")
    el-form-item
      el-button(type="primary", @click="searchMateriels") 搜索
    el-form-item
      el-button(type="primary", @click="addMateriel") 新建物料
    //- el-form-item
    //-   el-button(type="primary") 导出
  //- 列表
  .ml-table
    el-table(
      :data="materielList",
      highlight-current-row
      height="100%"
      size="mini"
      @row-dblclick="dbClickMaterielRow"
      v-loading="loadingMateriels")
      el-table-column(align="center", show-overflow-tooltip, type="index", :index="indexMethod", label="序号", :fixed="true")
      el-table-column(align="center", label="物料编码")
        template(slot-scope="scope")
          el-tooltip(
            effect="dark"
            placement="top"
            :content="scope.row.skuId")
            div.cell.el-tooltip(style="padding: 0") {{scope.row.skuId}}
      el-table-column(align="center", show-overflow-tooltip, prop="skuName", label="名称")
      el-table-column(align="center", show-overflow-tooltip, prop="skuBrand", label="制造商")
        template(slot-scope="scope")
          span {{ scope.row.skuBrand | compare-list(manufacturerSelectAll) }}
      el-table-column(align="center", show-overflow-tooltip, prop="skuSpecification", label="型号规格")
      el-table-column(align="center", show-overflow-tooltip, prop="skuUnit", label="基本单位")
        template(slot-scope="scope")
          span {{ scope.row.skuUnit | compare-list(skuUnitSelectAll) }}
      el-table-column(align="center", show-overflow-tooltip, prop="skuCategory", label="物料类别")
        template(slot-scope="scope")
          span {{ scope.row.skuCategory | compare-list(cateGorySelectAll) }}
      el-table-column(align="center", show-overflow-tooltip, prop="skuGrade", label="物料分级")
        template(slot-scope="scope")
          span {{ scope.row.skuGrade | compare-list(gradeSelectAll) }}
      el-table-column(align="center", show-overflow-tooltip, prop="skuProperty", label="物料属性")
        template(slot-scope="scope")
          span {{ scope.row.skuProperty | compare-list(propertySelectAll) }}
      el-table-column(align="center", show-overflow-tooltip, prop="bomVersion", label="BOM版本")
      el-table-column(align="center", show-overflow-tooltip, prop="skuStatus", label="状态")
        template(slot-scope="scope")
          span {{ scope.row.skuStatus | compare-list(statusSelectAll) }}
      el-table-column(align="center", label="操作", min-width="120px")
        template(slot-scope="scope")
          el-tooltip(content="查看")
            i.icon-act.el-icon-view(@click="viewMateriel(scope.row)")
          el-tooltip(content="编辑")
            i.icon-act.el-icon-edit(@click="editMateriel(scope.row)")
          el-tooltip(content="复制")
            i.icon-act.el-icon-hy-copy(@click="copyMateriel(scope.row)")
          el-tooltip(content="删除")
            i.icon-act.el-icon-delete(@click="deleteMateriel(scope.row, scope.$index)")
  //- 分页
  el-pagination.ml-pagination(
    layout="total, prev, pager, next, jumper",
    @current-change="changeMaterielPage",
    :current-page.sync="currentPage",
    :page-size="pageSize",
    :background="true",
    :total="materielListTotal")
  materiel-popup(
    :title="dialogTitle",
    :visible="showDialog",
    :view-status="viewStatus",
    :parent-data="popupObj",
    @submit="onFormSubmit",
    @close="closeDialog")
</template>

<script>
import { mapGetters } from 'vuex';
import ManApi from '@/api/manage';
import materielPopup from './materielPopup';

export default {
  name: 'invmateriel',
  components: {
    materielPopup
  },
  data() {
    return {
      materielName: '',
      skuCategory: null,
      skuGrade: null,
      skuProperty: null,
      skuStatus: null,
      // 列表
      materielList: [],
      materielListTotal: 1,
      currentPage: 1,
      pageSize: 20,
      loadingMateriels: true,
      // popup dialog
      showDialog: false,
      dialogTitle: '新建物料',
      // true-查看 false-编辑
      viewStatus: false,
      // 基础
      popupObj: {
        status: '0',
        picture: [],
        qalerts: [],
        procurers: [],
        skuProcurementControls: []
      },
      // 搜索条件选项
      statusSelectAll: [{ name: '启用', value: '0' }, { name: '禁用', value: '1' }]
    };
  },
  computed: {
    ...mapGetters({
      creator: 'employeeId',
      cateGorySelectAll: 'skuTypeSelect',
      propertySelectAll: 'skuPropSelect',
      gradeSelectAll: 'skuLevelSelect',
      manufacturerSelectAll: 'skuManSelect',
      skuUnitSelectAll: 'unitSelect'
    })
  },
  methods: {
    indexMethod (i) {
      const size = this.pageSize || 20;
      return ((this.currentPage - 1) * size) + (i + 1);
    },
    openDialog () {
      this.showDialog = true;
    },
    closeDialog () {
      this.showDialog = false;
    },
    // 获取列表数据
    loadMaterielList () {
      const params = {
        creator: this.creator,
        name: this.materielName,
        skuCategory: this.skuCategory,
        skuGrade: this.skuGrade,
        skuProperty: this.skuProperty,
        skuStatus: this.skuStatus,
        pageSize: this.pageSize,
        pageNum: this.currentPage
      };
      for (const key in params) {
        if (params[key] === null || params[key] === '' || params[key] === undefined) {
          delete params[key];
        }
      }
      this.loadingMateriels = true;
      ManApi.getMaterielList(params).then((result) => {
        this.materielList = result.records;
        this.materielListTotal = result.totalNum;
        this.loadingMateriels = false;
      }).catch((error) => {
        this.loadingMateriels = false;
        this.$message.error('网络不给力，请稍后再试');
        console.log(JSON.stringify(error));
      });
    },
    searchMateriels () {
      if (this.currentPage !== 1) {
        this.currentPage = 1;
      }
      this.loadMaterielList();
    },
    // 监听对Materiel列表操作事件
    dbClickMaterielRow (row) {
      this.viewMateriel(row);
    },
    // 增删改查 物料
    addMateriel () {
      this.highlightID = '';
      this.dialogTitle = '新建物料';
      this.popupObj = {
        status: '0',
        picture: [],
        qalerts: [],
        procurers: [],
        skuProcurementControls: []
      };
      this.viewStatus = false;
      this.openDialog();
    },
    viewMateriel (row) {
      this.dialogTitle = '查看物料';
      ManApi.getMaterielDetail({ id: row.skuId }).then((result) => {
        this.popupObj = result;
        this.viewStatus = true;
        this.openDialog();
      });
    },
    editMateriel (row) {
      this.dialogTitle = '编辑物料';
      ManApi.getMaterielDetail({ id: row.skuId }).then((result) => {
        this.popupObj = result;
        this.viewStatus = false;
        this.openDialog();
      });
    },
    copyMateriel (row) {
      this.dialogTitle = '新建物料';
      ManApi.getMaterielDetail({ id: row.skuId }).then((result) => {
        this.popupObj = result;
        this.popupObj.skuId = null;
        this.viewStatus = false;
        this.openDialog();
      });
    },
    deleteMateriel (row, index) {
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadingMateriels = true;
        ManApi.deleteMateriel({ id: row.skuId }).then((result) => {
          this.loadingMateriels = false;
          if (!result.status) {
            this.materielList.splice(index, 1);
            this.materielListTotal = this.materielListTotal - 1;
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          } else {
            this.$message.error('删除失败');
          }
        }).catch((error) => {
          this.$message.error('删除失败');
          this.loadingMateriels = false;
          console.log(JSON.stringify(error));
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 弹出层提交
    onFormSubmit (data) {
      console.log(data);
      if (data.isNew) {
        // 新增
        this.materielList.unshift({});
        this.$set(this.materielList, 0, data);
        this.materielListTotal = this.materielListTotal + 1;
      } else {
        const index = this.materielList.findIndex(item => item.skuId === data.skuId);
        this.$set(this.materielList, index, data);
      }
    },
    // 分页
    changeMaterielPage (currentPage) {
      this.currentPage = currentPage;
      this.loadMaterielList();
    }
  },
  mounted () {
    this.loadMaterielList();
  }
};
</script>

<style lang="sass">
@import "../../../styles/utils"
$SEARCHHEIGHT: 56px
$PAGEHEIGHT: 56px
.cp-manage-materiel
  .ml-search
    height: $SEARCHHEIGHT
    overflow-x: auto
    overflow-y: hidden
    padding: 12px 0 12px 16px
    .el-form-item
      margin-right: 14px
    .el-form-item__label
      padding-right: 6px
  .ml-table
    position: absolute
    top: $SEARCHHEIGHT
    bottom: $PAGEHEIGHT
    left: 16px
    right: 16px
    overflow: auto
    table
      &::before
        display: none
      .icon-act
        font-size: 16px
        font-weight: 500
        cursor: pointer
        margin-left: 3px
        margin-right: 3px
        &:hover
          color: #5D9BFB
  .el-table
    .cell.el-tooltip
      user-select: text;
      div, span
        user-select: text;
  .ml-pagination
    position: absolute
    bottom: 12px
    left: 0
    right: 0
    text-align: center
</style>
